<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阴影</title>

        <style type="text/css">
            .wrapper { width: 500px;  height: 200px ; margin: 30px auto ; border: 1px solid gray ; }
            .first { 
                text-align: center ;
                font-size: 50px ;
                text-shadow: 0 0 10px gold ; /* 设置文本阴影效果 ( 水平偏移  垂直偏移  阴影距离 颜色 )*/
            }

            .second {
                box-shadow: 0 0 5px 4px red ; /* 水平偏移  垂直偏移  模糊距离  阴影距离 颜色 */
            }

            .third {
                box-shadow: 0 0 10px 8px red inset ;
                border-radius: 50% ;
                text-align: center ;
                line-height: 200px ;
            }
        </style>

    </head>
    <body>

        <div class="wrapper first">
            猴哥猴哥
        </div>
        <div class="wrapper second">
            你真了不得
        </div>
        <div class="wrapper third">
            五行大山压不住你
        </div>
        
    </body>
</html>